<template>
	<div>
		<el-button v-if="showUpButton" type="success" icon="ele-Plus" @click="()=>{ state.dialogVisible=true }">上传文件
		</el-button>
		<div v-for="item in state.tableData" :key="item.id">
			{{item.fileName}} 
			<el-button type="primary" link @click="downloadFile(item.id)">下载</el-button>
			<el-button v-if="showUpButton" type="primary" link @click="deleteHandle(item.id)">删除
			</el-button>
		</div>
		<el-dialog title="文件导入" v-model="state.dialogVisible" width="40%" class="customDialog">
			<el-upload class="upload-demo" ref="uploadRef" v-model:file-list="state.fileList" :limit="10" multiple action="#"
				:before-upload="beforeupload" :on-exceed="handleExceed" :on-success="handleSuccess"
				:on-error="handleError" :http-request="uploadFile" :with-credentials='true'>
				<template #trigger>
					<el-button type="primary">选取文件</el-button>
				</template>
			</el-upload>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="submitUpload">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="fileUpload">
import { reactive, onMounted, ref, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox, ElLoading, UploadInstance, UploadRequestOptions } from 'element-plus'
import { SysFile, fileApi } from '/@/api/sys/file-api'
const uploadRef = ref<UploadInstance>()
const props = defineProps({
	businessId: {
		type: String,
		default: () => ''
	},
	showUpButton: {
		type: Boolean,
		default: true
	}
})
const state = reactive({
	fileList: [],
	tableData: [] as SysFile[],
	listLoading: false,
	dialogVisible: false
})
const loadList = () => {
	fileApi.getFileListByBusinessId(props.businessId).then(data => {
		if (data && data.code === 0) {
			state.tableData = data.data
		} else {
			state.tableData = []
		}
	}).catch(() => {
	}).finally(() => {
	})
}
// 页面加载时
onMounted(() => {
	loadList()
})
const downloadFile = (id: string) => {
	fileApi.downloadFile(id)
}
const deleteHandle = (id: string) => {
	ElMessageBox.confirm('是否确定删除', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(() => {
		const loading = ElLoading.service({
			lock: true,
			text: '处理中',
			background: 'rgba(0, 0, 0, 0.7)',
		})
		fileApi.deleteFileById(id).then((data) => {
			if (data && data.code === 0) {
				ElMessage.success('删除成功！')
			} else {
				ElMessage.error(data.message)
			}
			loadList()
		}).catch(() => {
			ElMessage.error('删除失败！')
		}).finally(() => {
			loading.close()
		})
	})
}

const beforeupload = (file: any) => {
	return true
}
const handleExceed =  (files: any, fileList: any) => {
	ElMessage.error('一次只能导入10个文件！')
}
const handleSuccess = (response: any, file: any, fileList: any) => {
	// console.log(response.code)
	if (response.code === 0) {
		ElMessage.success('上传成功！')
	} else {
		ElMessage.error('上传失败！')
	}
}
const handleError = (err: any, file: any, fileList: any) => {
	ElMessage.error('上传失败！')
}
const uploadFile = (options: UploadRequestOptions) => {
	// none
}

//取消修改
const handleClose = () => {
	state.dialogVisible = false
	uploadRef.value!.clearFiles()
	state.fileList = []
	loadList()
}
//上传文件
const submitUpload = () => {
	let formData = new FormData()
	console.log(state.fileList)
	nextTick(() => {
		state.fileList.forEach((val, index) => {
			formData.append('file', val.raw)
		})
		const loading = ElLoading.service({
			lock: true,
			text: '处理中',
			background: 'rgba(0, 0, 0, 0.7)',
		})
		formData.append('businessId', props.businessId)
		fileApi.importCommon(formData).then(data => {
			if (data && data.code === 0) {
				ElMessage.success('上传成功！')
				handleClose()
				loadList()
			} else {
				ElMessage.error(data.message)
			}
		}).catch(() => {
			ElMessage.error('上传失败！')
		}).finally(() => {
			loading.close()
		})
	})
	
}
watch( () => props.businessId, (val: string) => {
	if (val) {
		loadList()
	}
})
</script>